<template>
  <div style="margin-top:-.4rem">
    <transition name="fade">
      <div class="qabg1 content" v-if="show1" @click="nextPage"></div>
    </transition>
    <transition name="fade">
      <div class="qabg2 content" v-if="show2" @click="nextPage"></div>
    </transition>
    <transition name="fade">
      <div class="qabg content" v-if="show3">
        <div class="displayA">
          <q-a-title>第一题：p2p的全称是什么?</q-a-title>
          <q-a-option score="A" id="opt1" @getScore="add">peer to peer</q-a-option>
          <q-a-option score="B" id="opt2" @getScore="add">people to people</q-a-option>
          <q-a-option score="C" id="opt3" @getScore="add">person to person</q-a-option>
          <q-a-option score="D" id="opt4" @getScore="add">previous to present</q-a-option>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg content" v-if="show4">
        <div class="displayA">
          <q-a-title>第二题：p2p平台必须必备条件?</q-a-title>
          <q-a-option score="A" id="opt1" @getScore="add">进行完整的信息披露</q-a-option>
          <q-a-option score="B" id="opt2" @getScore="add">p2p牌照</q-a-option>
          <q-a-option score="C" id="opt3" @getScore="add">保险公司的保单</q-a-option>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg content" v-if="show5">
        <div class="displayA">
          <q-a-title>第三题：现在怎样投p2p更安全?</q-a-title>
          <q-a-option score="A" id="opt1" @getScore="add">投到头部平台</q-a-option>
          <q-a-option score="B" id="opt2" @getScore="add">分散到小平台</q-a-option>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg content" v-if="show6">
        <div class="displayA">
          <q-a-title>第四题：p2p现面临流动性问题?</q-a-title>
          <q-a-option score="A" id="opt1" @getScore="add">平台缺钱</q-a-option>
          <q-a-option score="B" id="opt2" @getScore="add">平台人员流动性太大</q-a-option>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg content" v-if="show7">
        <div class="displayA">
          <q-a-title>第五题:您认为p2p的风险是?</q-a-title>
          <q-a-option score="A" id="opt1" @getScore="add">无风险</q-a-option>
          <q-a-option score="B" id="opt2" @getScore="add">有风险但能保住50%的本金</q-a-option>
          <q-a-option score="C" id="opt3" @getScore="add">有风险可能损失全部本金</q-a-option>
          <q-a-option score="D" id="opt4" @getScore="add">保本保息</q-a-option>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg content" v-if="show8">
        <div class="displayA">
          <q-a-title>第六题：投资完p2p已到期,正确的做法?</q-a-title>
          <q-a-option score="A" id="opt1" @getScore="add">资金撤回银行卡</q-a-option>
          <q-a-option score="B" id="opt2" @getScore="add">续投长标</q-a-option>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg3 content" v-if="show9">
        <div class="displayA">
          <img src="https://www.bigzhuan.com/img/qa_ewm.png">
        </div>
        <div class="nextBtn" @click="getNum"></div>
      </div>
    </transition>
    <transition name="fade">
      <div class="qabg4 content" v-if="show10">
        <div class="displayA result">
          <p v-for="item in msg" :key="item.id" v-text="item"></p>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import QATitle from './children/QATitle'
import QAOption from './children/QAOption'
import {getWXSDK} from '../../../service/getData.js'
var wx = require('weixin-js-sdk');

export default {
  components:{
    QATitle,
    QAOption
  },
  data(){
    return {
      currentPage:1,
      show1:true,
      show2:false,  
      show3:false,
      show4:false,
      show5:false,
      show6:false,
      show7:false,
      show8:false,
      show9:false,
      show10:false,
      results:'',
      num:0,
      msg:[]
    }
  },
  methods:{
    nextPage(){
      this.currentPage++
      switch(this.currentPage){
        case 2:
          this.show1 = false
          this.show2 = true
        break;
        case 3:
          this.show2 = false
          this.show3 = true
        break;
        case 4:
          this.show3 = false
          this.show4 = true
        break;
        case 5:
          this.show4 = false
          this.show5 = true
        break;
        case 6:
          this.show5 = false
          this.show6 = true
        break;
        case 7:
          this.show6 = false
          this.show7 = true
        break;
        case 8:
          this.show7 = false
          this.show8 = true
        break;
        case 9:
          this.show8 = false
          this.show9 = true
        break;
        case 10:
          this.show9 = false
          this.show10 = true
        break;
      }
    },
    add(val){
      this.results += val
      this.nextPage()
    },
    getSDK(data){
      //wx是引入的微信sdk
      //通过config接口注入权限验证配置
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxe93a5b09e46e21b3', // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });

      wx.ready(function() { //通过ready接口处理成功验证
      // config信息验证成功后会执行ready方法
        wx.onMenuShareAppMessage({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
            title: '你是理财高手，还是投资小白？', // 分享标题
            desc: '近期p2p雷潮一片,您中招了么？快来测试一下，有奖励！', // 分享描述
            link: 'https://www.bigzhuan.com/QActivity', // 分享链接
            imgUrl: 'https://www.bigzhuan.com/img/wxshare.png', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
            });
            wx.onMenuShareTimeline({ //分享朋友圈
            title: '你是理财高手，还是投资小白？', // 分享标题
            link: 'https://www.bigzhuan.com/QActivity',
            imgUrl: 'https://www.bigzhuan.com/img/wxshare.png', // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
      });
      wx.error(function(res){//通过error接口处理失败验证
          // config信息验证失败会执行error函数
      });
    },
    getNum(){
      // console.log(this.results)
      if(this.results[0]==='A'){
        this.num += 10
      }
      if(this.results[1]==='A'){
        this.num += 10
      }
      if(this.results[2]==='A'){
        this.num += 10
      }
      if(this.results[3]==='A'){
        this.num += 10
      }
      if(this.results[4]==='C'){
        this.num += 10
      }
      if(this.results[5]==='A'){
        this.num += 10
      }
      // console.log(this.num)
      if(this.num <= 20){
        this.msg = ['投资小白','p2p知识匮乏哦','抓紧到比赚学习吧']
      }else if(this.num <= 40){
        this.msg = ['理财能手','再接再厉']
      }else{
        this.msg = ['投资高手','获得58元红包奖励','请关注红包到账情况']
      }

      this.nextPage()
    }
  },
  created(){
    getWXSDK(location.href)
      .then(res=>{
        // console.log(res);
        this.getSDK(res)
      })
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';
  .qabg1{
    .wh(10rem,14.6667rem);
    background: url('https://bigzhuan.com/img/qabg_1.jpg') 100% 100% no-repeat;
    background-size: 100%;
  }
  .qabg2{
    .wh(10rem,14.6667rem);
    background: url('https://bigzhuan.com/img/qabg_2.jpg') 100% 100% no-repeat;
    background-size: 100%;
  }
  .qabg3{
    .wh(10rem,14.6667rem);
    background: url('https://bigzhuan.com/img/qabg_4.jpg') 100% 100% no-repeat;
    background-size: 100%;
    position: relative;
    img{
      .wh(3.9733rem,4.48rem);
      position: absolute;
      top: 7rem;
      left: 3rem;
    }
    .nextBtn{
      .wh(8rem,1.3rem);
      .bg(transparent);
      position: absolute;
      top: 11.8rem;
      left: 1rem;
    }
  }
  .qabg4{
    .wh(10rem,14.6667rem);
    background: url('https://bigzhuan.com/img/qabg_5.jpg') 100% 100% no-repeat;
    background-size: 100%;
    .result{
      .fx();
      padding-top: 4.2rem;
      .sc(0.4667rem,#dd3930);
      font-weight: bold;
      p:first-child{
        font-size: 0.9333rem
      }
    }
    img{
      .wh(4.5333rem,5.0667rem);
      position: relative;
      left: 2.7rem;
      top: 1.7rem;
    }
  }
  .qabg{
    .wh(10rem,14.6667rem);
    background: url('https://bigzhuan.com/img/qabg_3.jpg') 100% 100% no-repeat;
    background-size: 100%;
    position: relative;
  }
  .content{
    .fade-enter-active {
      animation: sild 1s .3s;
    }
    .fade-leave-active {
      animation: sild 1s reverse;
    }
    @keyframes sild {
      0%{
        transform: scale(0)
      }
      100%{
        transform: scale(1)
      }
    }
  }
</style>
